<template>
    <!-- lzy 2022-8-17 08点35分 用户实名绑定 -->
    <div id="userRealBinds">
        <el-row :gutter="20">
            <el-col :span="3"><el-button type="primary" @click="openSaveVisiable">新增实例信息</el-button></el-col>
            <el-col :span="1">
                <label for="">搜索:</label>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="请输入真实姓名" v-model="realName"></el-input>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="请输入身份证件" v-model="identity"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button icon="el-icon-search" @click="getUerRealBindsFind()" circle></el-button>
            </el-col>
        </el-row>
        <el-card>
            <el-row>
                <el-col>
                    <el-table
                        :data="userRealBindsList"
                        border
                        style="width: 100%"
                        max-height="800px">
                        <el-table-column
                        fixed
                        width="100"
                        prop="realName"
                        label="真实姓名">
                        </el-table-column>
                        <el-table-column
                        prop="identity"
                        label="身份证号">
                        </el-table-column>
                        <el-table-column
                        prop="phone"
                        label="手机号">
                        </el-table-column>
                        <el-table-column
                        prop="papersTypeId"
                        label="证件类型">
                         <template slot-scope="scope">
                            <div v-for="item in papersTypeList" :key="item.id">
                                <span v-if="item.id === scope.row.papersTypeId">{{item.papersTypeText}}</span>
                            </div>
                         </template>
                        </el-table-column>
                        <el-table-column
                        prop="passengerTypeId"
                        label="游客类型">
                         <template slot-scope="scope">
                            <div v-for="item in passengerTypeList" :key="item.id">
                                <span v-if="item.id === scope.row.passengerTypeId">{{item.passengerTypeText}}</span>
                            </div>
                         </template>
                        </el-table-column>
                        <el-table-column
                        prop="createTime"
                        label="绑定日期">
                        </el-table-column>
                        <el-table-column
                        prop="updateTime"
                        label="修改日期">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="230">
                            <template slot-scope="scope">
                                <el-button @click="userRealBindsView(scope.row)" type="success" size="small">详情</el-button>
                                <el-button @click="userRealBindsEdit(scope.row)" type="primary" size="small">修改</el-button>
                                <el-button @click="hintDetele(scope.row.id)" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 分页组件 -->
            <div class='block'>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </el-card>
        <!-- 新增实名信息弹窗 -->
        <el-dialog
            title="新增实名信息"
            :visible.sync="saveVisiable"
            width="30%"
            :before-close="handleClose"
            :destroy-on-close="true">
            <el-form :model="userRealBindsForm" :rules="saveUserRealBindsRules" ref="userRealBindsForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="绑定账号" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsForm.userId" filterable placeholder="绑定账号">
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.loginName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件类型" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsForm.papersTypeId" filterable placeholder="证件类型">
                        <el-option
                            v-for="item in papersTypeList"
                            :key="item.id"
                            :label="item.papersTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="userRealBindsForm.realName"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="identity">
                    <el-input v-model="userRealBindsForm.identity"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userRealBindsForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="游客类型" :label-width="formLabelWidth" prop="passengerTypeId">
                    <el-select v-model="userRealBindsForm.passengerTypeId" filterable placeholder="游客类型">
                        <el-option
                            v-for="item in passengerTypeList"
                            :key="item.id"
                            :label="item.passengerTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveSubmitForm('userRealBindsForm')">立即创建</el-button>
                    <el-button @click="resetForm('userRealBindsForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改实名信息弹窗 -->
        <el-dialog
            title="修改实名信息"
            :visible.sync="editVisiable"
            width="30%"
            :before-close="handleClose"
            :destroy-on-close="true">
            <el-form :model="userRealBindsFormEdit" :rules="editUserRealBindsRules" ref="userRealBindsFormEdit" label-width="100px" class="demo-ruleForm">
                <el-form-item label="绑定账号" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsFormEdit.userId" filterable placeholder="绑定账号">
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.loginName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件类型" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsFormEdit.papersTypeId" filterable placeholder="证件类型">
                        <el-option
                            v-for="item in papersTypeList"
                            :key="item.id"
                            :label="item.papersTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="userRealBindsFormEdit.realName"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="identity">
                    <el-input v-model="userRealBindsFormEdit.identity"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userRealBindsFormEdit.phone"></el-input>
                </el-form-item>
                <el-form-item label="游客类型" :label-width="formLabelWidth" prop="passengerTypeId">
                    <el-select v-model="userRealBindsFormEdit.passengerTypeId" filterable placeholder="游客类型">
                        <el-option
                            v-for="item in passengerTypeList"
                            :key="item.id"
                            :label="item.passengerTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editSubmitForm('userRealBindsFormEdit')">立即修改</el-button>
                    <el-button @click="resetForm('userRealBindsFormEdit')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 详情实名信息弹窗 -->
        <el-dialog
            title="修改实名信息"
            :visible.sync="viewVisiable"
            width="30%"
            :destroy-on-close="true">
            <el-form :model="userRealBindsFormEdit" :rules="editUserRealBindsRules" ref="userRealBindsFormEdit" label-width="100px" class="demo-ruleForm">
                <el-form-item label="绑定账号" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsFormEdit.userId" :disabled="true" placeholder="绑定账号" >
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件类型" :label-width="formLabelWidth" prop="userId">
                    <el-select v-model="userRealBindsFormEdit.papersTypeId" :disabled="true" filterable placeholder="证件类型">
                        <el-option
                            v-for="item in papersTypeList"
                            :key="item.id"
                            :label="item.papersTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input :disabled="true" v-model="userRealBindsFormEdit.realName"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="identity">
                    <el-input :disabled="true" v-model="userRealBindsFormEdit.identity"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input :disabled="true" v-model="userRealBindsFormEdit.phone"></el-input>
                </el-form-item>
                <el-form-item label="游客类型" :label-width="formLabelWidth" prop="passengerTypeId">
                    <el-select v-model="userRealBindsFormEdit.passengerTypeId" :disabled="true" filterable placeholder="游客类型">
                        <el-option
                            v-for="item in passengerTypeList"
                            :key="item.id"
                            :label="item.passengerTypeText"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'UserRealBindsViews',
    data () {
        /* 新增校验合法真实姓名 */
        var validateSaveRealName = (rule, value, callback) => {
            const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
            if (!value) {
                return callback(new Error('真实姓名不能为空!!'))
            } else {
                if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                } else {
                    this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkRealName', {
                        params: {
                            realName: value,
                            userId: this.userRealBindsForm.userId
                        }
                    }).then(res => {
                        if (!res.data.flag) {
                            return callback(new Error('当前用户已经被绑定,可以换个账户绑定'))
                        } else {
                            callback()
                        }
                    })
                }
            }
        }
        /* 新增校验合法手机号 */
        var validateSavePhone = (rule, value, callback) => {
            const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!value) {
                return callback(new Error('手机号码不能为空!!'))
            }
            setTimeout(() => {
                if (!phoneReg.test(value)) {
                    return callback(new Error('手机号码格式错误'))
                } else {
                    callback()
                }
            }, 100)
        }
        // 新增校验校验身份证
        var validateSaveIdentity = (rule, value, callback) => {
            const identityReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
            if (!value) {
                return callback(new Error('身份证不能为空！'))
            } else {
                this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkIdentity',{
                    params: {
                        identity: value,
                        userId: this.userRealBindsForm.userId
                    }
                }).then(res => {
                    if (!res.data.flag) {
                        new callback(new Error('当前用户已绑定此证件,可以换个账户绑定'))
                    }
                })
            }
            setTimeout(() => {
                if (!identityReg.test(value)) {
                    return callback(new Error('请输入合法的身份证号'))
                } else {
                    callback()
                }
            }, 100)
        }
        /* 修改校验合法真实姓名 */
        var validateEditRealName = (rule, value, callback) => {
            const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
            if (!value) {
                return callback(new Error('真实姓名不能为空!!'))
            } else if (value === this.realNameRule) {
                callback()
            } else {
                if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                } else {
                    this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkRealName', {
                        params: {
                            realName: value,
                            userId: this.userRealBindsFormEdit.userId
                        }
                    }).then(res => {
                        if (!res.data.flag) {
                            return callback(new Error('当前用户已经被绑定,可以换个账户绑定'))
                        } else {
                            callback()
                        }
                    })
                }
            }
        }
        /* 修改校验合法手机号 */
        var validateEditPhone = (rule, value, callback) => {
            const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!value) {
                return callback(new Error('手机号码不能为空!!'))
            }
            setTimeout(() => {
                if (!phoneReg.test(value)) {
                    return callback(new Error('手机号码格式错误'))
                } else {
                    callback()
                }
            }, 100)
        }
        // 修改校验校验身份证
        var validateEditIdentity = (rule, value, callback) => {
            const identityReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
            if (!value) {
                return callback(new Error('身份证不能为空！'))
            } else if (value === this.identityRule) {
                callback()
            } else {
                this.$axios.get('http://127.0.0.1:8082/userRealBinds/checkIdentity',{
                    params: {
                        identity: value,
                        userId: this.userRealBindsFormEdit.userId
                    }
                }).then(res => {
                    if (!res.data.flag) {
                        new callback(new Error('当前用户已绑定此证件,可以换个账户绑定'))
                    }
                })
            }
            setTimeout(() => {
                if (!identityReg.test(value)) {
                    return callback(new Error('请输入合法的身份证号'))
                } else {
                    callback()
                }
            }, 100)
        }
        return {
            // 存放游客类型列表
            passengerTypeList: [],
            // 存放证件类型列表
            papersTypeList: [],
            // 用于校验存放身份证号
            identityRule: '',
            // 用于校验存放真实姓名
            realNameRule: '',
            // 身份证号 用于模糊查询
            identity: '',
            // 真实姓名 用于模糊查询
            realName: '',
            formLabelWidth: '120px',
            // 存放用户账号信息集合
            userList: [],
            // 详情弹窗状态
            viewVisiable: false,
            // 新增弹框状态
            saveVisiable: false,
            // 修改弹框状态
            editVisiable: false,
            // 存放实名信息列表
            userRealBindsList: [],
            // 分页对象
			page: {
				// 每页条数
				pageSize: 10,
				// 分页页数
				pageNum: 1,
				// 分页总条数
				total: 0
			},
            // 分页默认页数
            currentPage4: 1,
            // 实名信息新增对象
            userRealBindsForm: {
                id: '',
                // 真实姓名
                realName: '',
                // 身份证
                identity: '',
                // 手机号
                phone: '',
                // 关联账户id
                userId: '',
                // 证件类型Id
                papersTypeId: '',
                // 游客类型Id
                passengerTypeId: '',
                // 创建时间
                createTime: '',
                // 修改时间
                updateTime: ''
            },
            // 实名信息修改对象
            userRealBindsFormEdit: {
                id: '',
                // 真实姓名
                realName: '',
                // 身份证
                identity: '',
                // 手机号
                phone: '',
                // 关联账户id
                userId: '',
                // 证件类型Id
                papersTypeId: '',
                // 游客类型Id
                passengerTypeId: '',
                // 创建时间
                createTime: '',
                // 修改时间
                updateTime: ''
            },
            // 用户修改校验
            editUserRealBindsRules: {
                // 姓名验证
                realName: [
                    { validator: validateEditRealName, trigger: 'blur'},
                ],
                // 身份证验证
                identity: [
                    { validator: validateEditIdentity,required: true, trigger: 'blur' },
                ],
                // 手机号验证
                phone: [
                    { validator: validateEditPhone, trigger: 'blur'},
                ],
                // 账号绑定
                userId: [
                    { required: true, message: '请选择绑定账户', trigger: 'blur' }
                ],
                // 游客类型绑定
                passengerTypeId: [
                    { required: true, message: '请选择游客类型', trigger: 'blur' }
                ],
                // 证件类型绑定
                papersTypeId: [
                    { required: true, message: '请选择证件类型', trigger: 'blur' }
                ]
            },
            // 用户新增校验
            saveUserRealBindsRules: {
                // 姓名验证
                realName: [
                    { validator: validateSaveRealName, trigger: 'blur'},
                ],
                // 身份证验证
                identity: [
                    { validator: validateSaveIdentity,required: true, trigger: 'blur' },
                ],
                // 手机号验证
                phone: [
                    { validator: validateSavePhone, trigger: 'blur'},
                ],
                // 账号绑定
                userId: [
                    { required: true, message: '请选择绑定账户', trigger: 'blur' }
                ],
                // 游客类型绑定
                passengerTypeId: [
                    { required: true, message: '请选择游客类型', trigger: 'blur' }
                ],
                // 证件类型绑定
                papersTypeId: [
                    { required: true, message: '请选择证件类型', trigger: 'blur' }
                ]
            },
        }
    },
    mounted () {
        this.getUserRealBindsList()
        this.getPassengerTypeList()
        this.getPapersTypeList()
    },
    methods: {
        // 获取游客类型列别
        getPassengerTypeList () {
            this.$axios.get('http://127.0.0.1:8082/passengerType/getPassengerTypeList').then(res =>{
                this.passengerTypeList = res.data.obj
            })
        },
        // 获取证件类型列表
        getPapersTypeList () {
            this.$axios.get('http://127.0.0.1:8082/papersType/getPapersTypeList').then(res =>{
                this.papersTypeList = res.data.obj
            })
        },
        // 模糊查询
        getUerRealBindsFind () {
            this.$axios.get('http://127.0.0.1:8082/userRealBinds/getUserRealBindsFind', {
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    realName: this.realName,
                    identity: this.identity
                }
            }).then(res => {
                this.userRealBindsList = res.data.obj.content
                this.page.total = res.data.obj.total
            })
        },
        // 详情弹窗打开触发方法
        userRealBindsView (row) {
            this.viewVisiable = true
            this.getUserList()
            this.userRealBindsFormEdit = row
        },
        // 修改实名信息提交校验判断
        editSubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editUserRealBinds()
                } else {
                    return false;
                }
            })
        },
        // 打开修改弹窗（点击修改执行方法）
        userRealBindsEdit (row) {
            this.editVisiable = true
            this.userRealBindsFormEdit = row
            this.realNameRule = row.realName
            this.identityRule = row.identity
            this.getUserList()
        },
        // 修改实例信息
        editUserRealBinds () {
            var formdata = new FormData()
            formdata.set('id', this.userRealBindsFormEdit.id)
            formdata.set('realName', this.userRealBindsFormEdit.realName)
            formdata.set('identity', this.userRealBindsFormEdit.identity)
            formdata.set('phone', this.userRealBindsFormEdit.phone)
            formdata.set('userId', this.userRealBindsFormEdit.userId)
            formdata.set('papersTypeId', this.userRealBindsFormEdit.papersTypeId)
            formdata.set('passengerTypeId', this.userRealBindsFormEdit.passengerTypeId)
            this.$axios.put('http://127.0.0.1:8082/userRealBinds/editUserRealBinds', formdata).then(res => {
                if (res.data.flag) {
                    this.message('恭喜您，修改成功', 'success')
                    // 初始化对象数据
                    this.userRealBindsFormEdit = {
                        id: '',
                        // 真实姓名
                        realName: '',
                        // 身份证
                        identity: '',
                        // 手机号
                        phone: '',
                        // 关联账户id
                        userId: '',
                        // 创建时间
                        createTime: '',
                        // 修改时间
                        updateTime: ''
                    }
                    // 关闭弹窗
                    this.editVisiable = false
                    this.getUserRealBindsList()
                } else {
                    this.message('修改失败，请重试', 'warning')
                }
            })
        },
        // 删除提示框
        hintDetele (id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteUserRealBinds(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        deleteUserRealBinds (id) {
            this.$axios.delete('http://127.0.0.1:8082/userRealBinds/deleteUserRealBinds',{
                params: {
                    id: id
                }
            }).then(res => {
                if (res.data.obj > 0) {
                    this.message('删除成功', 'success')
                    this.getUserRealBindsList()
                } else {
                    this.message('删除失败', 'warning')
                }
            })
        },
        // 打开新增弹框
        openSaveVisiable () {
            this.saveVisiable = true
            this.getUserList()
        },
        // 获取用户账号 用于 绑定实例信息
        getUserList () {
            this.$axios.get('http://127.0.0.1:8082/userRealBinds/getUserList').then(res => {
                this.userList = res.data.obj
            })
        },
        // 创建实名信息提交校验判断
        saveSubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.saveUserRealBinds()
                } else {
                    return false;
                }
            })
        },
        // 新增实名信息
        saveUserRealBinds () {
            var formdata = new FormData()
            formdata.set('realName', this.userRealBindsForm.realName)
            formdata.set('identity', this.userRealBindsForm.identity)
            formdata.set('phone', this.userRealBindsForm.phone)
            formdata.set('userId', this.userRealBindsForm.userId)
            formdata.set('papersTypeId', this.userRealBindsFormEdit.papersTypeId)
            formdata.set('passengerTypeId', this.userRealBindsFormEdit.passengerTypeId)
            this.$axios.post('http://127.0.0.1:8082/userRealBinds/saveUserRealBins', formdata)
            .then(res => {
                if (res.data.obj > 0) {
                    this.message('恭喜您，添加成功', 'success')
                    // 初始化对象数据
                    this.userRealBindsForm = {
                        id: '',
                        // 真实姓名
                        realName: '',
                        // 身份证
                        identity: '',
                        // 手机号
                        phone: '',
                        // 关联账户id
                        userId: '',
                        // 创建时间
                        createTime: '',
                        // 修改时间
                        updateTime: ''
                    }
                    // 关闭弹窗
                    this.saveVisiable = false
                    this.getUserRealBindsList()
                } else {
                    this.message('添加失败', 'warning')
                }
            }) 
        },
        // 新增重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.imageUrl = ''
        },
        // 弹窗关闭前的提醒
        handleClose(done) {
            this.$confirm('关闭后数据将不会被保存，确认关闭？')
            .then(_ => {
                done();
                // 实名信息新增对象
                this.userRealBindsForm = {
                    id: '',
                    // 真实姓名
                    realName: '',
                    // 身份证
                    identity: '',
                    // 手机号
                    phone: '',
                    // 关联账户id
                    userId: '',
                    // 创建时间
                    createTime: '',
                    // 修改时间
                    updateTime: ''
                }
            })
            .catch(_ => {});
        },
        // 获取实名信息列表
        getUserRealBindsList () {
            this.$axios.get('http://127.0.0.1:8082/userRealBinds/getUserRealBindsList/',{
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum
                }
            }).then(res =>{
                this.userRealBindsList = res.data.obj.content
                this.page.total = res.data.obj.total
            })
        },
        // 分页pageSize 改变时会触发方法
		handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getUserRealBindsList()
		},
        // 分页currentPage 改变时会触发方法
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getUserRealBindsList()
		},
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            })
        }
    }
}
</script>

<style>

</style>
